<template>
	<view class="content">
		<!-- uniapp 所有的标签都是小程序的标签 (组件)
		     指令都是用vue的
		-->
		<!-- 搜索栏 -->
		<view class="searchbox">
		   <icon class="icon-box-img" type="search" size="16" v-show="flag"></icon>
           <input type="text" 	
		   placeholder="拖把" 	
		   placeholder-class="placestyle"
		   @input="showseacrh"
		   >
		</view>
		<!-- 轮播图 -->
		<swiper indicator-dots="true" autoplay="true" 
		interval="2000" circular="true">
			<swiper-item v-for="item in swiperData" :key="item.img">
				<image :src="item.img" class="img"></image>
			</swiper-item>
		</swiper>
		<!-- 导航菜单 -->
		<view class="nav">
			<view v-for="item in navData" :key="item.img" class="itembox">
				<image :src="item.img"></image>
				<view>{{item.text}}</view>
			</view>
		</view>
		<!-- 商品列表  复用组件-->
		<product :listData="listData"></product>
	</view>
</template>

<script>
	// 几乎大部分js都是vue的
	// 生命周期：小程序+vue
	import product from "@/components/product.vue"
	export default {
		data() {
			return {
				flag:true,
				swiperData:[],
				navData:[],
				listData:[]
			}
		},
		created(){
			this.getData();
			this.getnavData();
			this.getlistData();
		},
		methods: {
            showseacrh(options){
				let len=options.detail.value.trim().length;
				if(len>0){
					this.flag=false;
				}else{
					this.flag=true;
				}
			},
			getData(){
				this.$request({
					url:"/api/xiaomi/swiper"
				}).then(res=>{
					//console.log(res);
					this.swiperData=res.data;
				}).catch(err=>{
					console.log(err);
				})
			},
			getnavData(){
				this.$request({
					url:"/api/xiaomi/nav"
				}).then(res=>{
					//console.log(res);
					this.navData=res.data;
				}).catch(err=>{
					console.log(err);
				})
			},
			getlistData(){
				this.$request({
					url:"/api/xiaomi/productList"
				}).then(res=>{
					console.log(res);
					this.listData.push(...res.data);
				}).catch(err=>{
					console.log(err);
				})
			}
		},
		components:{
			product
		},
		onReachBottom(){
			//console.log("触底加载更多")
			this.getlistData();
		}
	}
</script>

<style>
	/* css直接写,适配单位rpx */
	.searchbox{
		height:140rpx;
		width:100%;
		background-color: #845F3F;
		overflow: hidden;
		position: relative;
	}
	.searchbox input{
		height:70rpx;
		width:90%;
		margin-left:5%;
		margin-top:30rpx;
		background-color: #fff;
		border-radius:35rpx;
		text-align: center;
	}
	.placestyle{
		text-align: center;
	}
	.icon-box-img{
		position: absolute;
		left:40%;
		top:50rpx;
	}
	.img{
		width:100%;
	}
	.nav{
		display: flex;
	}
	.itembox{
		width:20%;
		text-align: center;
		margin:20rpx 0;
	}
	.itembox image{
		width:100rpx;
		height:100rpx;
	}
	.itembox view{
		font-size:24rpx;
	}
</style>
